<template>
  <el-input
    v-model="value"
    :clearable="clearable"
    @blur="run"
    @change="run"
    @clear="run"
    @keydown="clear"
  >
    <template 
      v-for="(key, index) in slots" :key="index"
      #[key]
    >
      <slot :name="key" ></slot>
    </template>
  </el-input>
  <slot name="data" user="jyk" :age="18" ></slot>
  <hr>
  <select>
    <option value="22">这是一个测试</option>
    <slot></slot>
  </select>
</template>

 
<script setup lang="ts" generic="T extends object">
  // import { ref } from 'vue'
  import type { IFormItemProps } from '../../../../lib/main'
  import { itemController } from '../../../../lib/main'

  const props = defineProps<IFormItemProps<T>>()
  
  const myslot = defineSlots<{
    default(props: any): any,
    prepend(props: any): any,
    append(props: any): any,
    data(
      props: {
        user: string,
        age: number
      }): any
  }>()

  console.log('slot：', myslot)

  const slots = [
    'prepend',
    'append' 
  ]
  /*
  const props = withDefaults(defineProps<IFormItemProps>(), {
    meta: {
      colName: '222',
      delay: 0
    },
    model: {},
    clearable: true,
    title: ''
  })
  */
  // console.log('props', props)

  const {
    value,
    run,
    clear
  } = itemController(props)

</script>